import React from "react";

export default class Rule extends React.Component {
  static get defaultProps() {
    return {
      id: null,
      parentId: null,
      field: null,
      operator: null,
      value: null,
      schema: null,
    };
  }

  render() {
    const {
      field,
      operator,
      value,
      ignoreCase,
      schema: { fields, controls, getOperators, getLevel, classNames },
    } = this.props;
    var level = getLevel(this.props.id);
    return (
      <div className={`rule ${classNames.rule}`}>
        {React.createElement(controls.fieldSelector, {
          options: fields,
          value: field,
          ignoreCase: ignoreCase,
          className: `rule-fields ${classNames.fields}`,
          handleOnChange: this.onFieldChanged,
          level: level,
        })}
        {React.createElement(controls.operatorSelector, {
          field: field,
          options: getOperators(field),
          value: operator,
          ignoreCase: ignoreCase,
          className: `rule-operators ${classNames.operators}`,
          handleOnChange: this.onOperatorChanged,
          level: level,
        })}
        {React.createElement(controls.valueEditor, {
          field: field,
          operator: operator,
          value: value,
          ignoreCase: ignoreCase,
          className: `rule-value ${classNames.value}`,
          handleOnChange: this.onValueChanged,
          level: level,
        })}
        {React.createElement(controls.ignoreCaseCheckbox, {
          label: "忽略大小写",
          value: ignoreCase,
          className: `rule-ignoreCase ${classNames.ignoreCase}`,
          handleOnChange: this.onIgnoreCaseChanged,
          level: level,
        })}
        {React.createElement(controls.removeRuleAction, {
          label: "x",
          className: `rule-remove ${classNames.removeRule}`,
          handleOnClick: this.removeRule,
          level: level,
        })}
      </div>
    );
  }

  onFieldChanged = (value) => {
    this.onElementChanged({ field: value });
  };

  onOperatorChanged = (value) => {
    this.onElementChanged({ operator: value });
  };

  onValueChanged = (value) => {
    const { ignoreCase } = this.props;
    console.log("value change", ignoreCase, value);
    const newValue = this.changeValueByIgnoreCase(ignoreCase, value);
    this.onElementChanged({ value: newValue });
  };

  onIgnoreCaseChanged = (ignoreCase) => {
    const { value } = this.props;
    const newValue = this.changeValueByIgnoreCase(ignoreCase, value);
    this.onElementChanged({ ignoreCase, value: newValue });
  };

  onElementChanged = (data) => {
    const {
      id,
      schema: { onPropChange },
    } = this.props;

    onPropChange(data, id);
  };

  removeRule = (event) => {
    event.preventDefault();
    event.stopPropagation();

    this.props.schema.onRuleRemove(this.props.id, this.props.parentId);
  };

  changeValueByIgnoreCase = (ignoreCase, value) => {
    return ignoreCase ? `${value}`.toLowerCase() : value;
  };
}
